<template>
  <div class="song_list" :class="{ active: item.isSong }">
    <div class="left">{{ item.songNmae }}</div>
    <div class="right">
      <deleteIcon :size="18" class="play_btn" @click.stop="deleteSongHandler(item)"></deleteIcon>
      <palyStar :size="18" class="play_btn"></palyStar>
      <span class="name">{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IAutioType } from '@renderer/pinia/modules/play'
import deleteIcon from '@renderer/base-ui/lt-icon/delete-icon.vue'
import palyStar from '../icon/paly-star.vue'

import usePlay from '@renderer/pinia/modules/play'

const playStore = usePlay()

defineProps({
  item: {
    type: Object as () => IAutioType,
    default: () => ({})
  }
})

// 从播放列表中删除
const deleteSongHandler = (item: any) => {
  playStore.deleteAudio(item.id)
}
</script>

<style scoped lang="scss">
.song_list {
  height: 34px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #171f34cc;
  transition: all 0.3s;
  border-radius: 3px;
  padding: 0 10px;

  .left {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .right {
    flex: 1;
    display: flex;
    padding-left: 15px;
    justify-content: flex-end;
    align-items: center;

    .play_btn {
      opacity: 0;
      transition: opacity 0.3s;
    }
    .name {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &:hover {
    background-color: #0e121fcc;
  }
  &:hover .play_btn {
    opacity: 1;
  }
}

.active {
  background-color: #0e121fcc;
}
</style>
